<template>
	<view class="home">
		<view class="kong"></view>
		 <view class="order_search">
		       <image src="../../static/TestImg/sousuo.png" id="sousuo">
		        <input type="text" placeholder="可用商品名称，店铺名，收件人搜索我的订单" class="kuang">
				
		    <text class="youshang" @click="fanhui">取消</text>
		    </view>
		  <view class="lishijilu">
		        <text class="lishi">历史记录</text>
		        <text class="shanchu"><image src="../../static/TestImg/shanchu.png" class=" delet"></text>
		    </view> 
		  <view class="jilu">
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		        <a href="">
		            <view class="shanchudingdan"><text>搜索历史</text></view>
		        </a>
		
		    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			fanhui(){
			uni.navigateBack({
				delta : 1
			})
			
			},
		}
	}
</script>

<style scoped>
	.kong{
		width: 100%;
		height: 60rpx;
	}

.delet{
	width: 40rpx;
	height: 40rpx;
}

        .order_search {
            width: 100%;
            height: 80rpx;
            margin-top: 40rpx;
           
            position: relative;
            box-sizing: content-box;
			
        }

        .order_search>.kuang {
            width: 80%;
            height: 60rpx;
            border-radius: 200rpx;
            margin-top: 12rpx;
            margin-left: 20rpx;
			font-size: 25rpx;
			background-color: aliceblue;
			text-indent: 3em;
        }

        #sousuo {
            position: absolute;
            left: 40rpx;
            top: 15rpx;
            font-size: 40rpx;
			width: 40rpx;
			height: 40rpx;
        }

        .youshang {
            position: absolute;
            right: 30rpx;
            top: 15rpx;
            font-size: 30rpx;
            color: rgb(132, 132, 132);
            color:  rgb(132, 132, 132);
        }
        .lishijilu{
            width: 100%;
            height: 40rpx;
            
            margin-top: 20rpx;
          
        }
        .shanchu{
            display: inline-block;
            width: 100rpx;
            margin-left: 63%;
            text-align: right;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .lishi{
          padding-left: 20rpx;
        }
        .jilu{
            width: 100%;
            height: 140rpx;
            margin-top: 40rpx;
           
            display: flex;
            justify-content:flex-start;
            flex-wrap: wrap;
        }
        .shanchudingdan {
            
            width: 180rpx;
            height: 50rpx;
            border-radius: 40rpx;
            font-size: 30rpx;
            text-align: center;
            margin-top: 20rpx;
            background-color: rgb(244, 242, 242);
           
        }
        .shanchudingdan>span{
            box-sizing: border-box;
            
        }
</style>
